<template>
  <!-- 表格开始 -->
  <jmash-table
    class="table-top"
    ref="multipleTableRef"
    row-key="id"
    :list-loading="listLoading"
    :data="tableData"
    :table-label="tableLabel"
    @selection-change="tableSelected"
    :is-selection="false"
  >
    <!-- suspended -->
    <template #suspended="scope">
      <span>
        <el-switch
          v-model="scope.data.row.suspended"
          :active-value="false"
          :inactive-value="true"
          @click="suspendTask(scope.data.row, scope.data.row.suspended)"
        />
      </span>
    </template>
    <template #createTime="scope">
      <span>{{
        format(new Date(scope.data.row.createTime), "yyyy-MM-dd HH:mm:ss")
      }}</span>
    </template>
    <template #assignee="scope">
      <span @click="handleAssignee(scope.data.row)">{{
        rbacApi.userInfo(scope.data.row.assignee).nickName || "分配用户"
      }}</span>
    </template>
    <template #dueDate="scope">
      <span>{{ scope.data.row.dueDate }}</span>
    </template>
  </jmash-table>
</template>
<script setup lang="ts">
import { type Ref, ref, reactive } from "vue";
import {
  type TableColumn,
  type DialogRef,
  type TableSort,
  useTableHooks,
} from "jmash-core";
import { Dict } from "@/api/flow/dict";
import { format } from "date-fns";
import { rbacApi } from "jmash-rbac";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

import type {
  TaskReq,
  FlowTaskPage,
  FlowProcInstKey,
  TaskKey,
  FlowTaskModel,
} from "@/api/flow/task/types";

import type { FlowSuspendTaskReq } from "@/api/flow/monitortask/types";

import { monitorTaskApi } from "@/api/flow/monitortask/index";

const props = defineProps({
  procInstId: {
    type: String,
    default: "",
  },
});
defineExpose({
  refresh
})
const queryParams = ref<TaskReq>({});
queryParams.value.procInstId = props.procInstId;

const {
  tableHooks,
  multipleTableRef,
  queryFormRef,
  listLoading,
  tableData,
  total,
} = useTableHooks(t, monitorTaskApi, queryParams);

let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "task.no",
    type: "index",
    width: "60",
    isColumn: true,
  },
  {
    label: "task.id",
    prop: "id",
    width: "100",
    sortable: true,
    isColumn: true,
  },
  {
    label: "task.name",
    prop: "name",
    isColumn: true,
  },
  {
    label: "task.createTime",
    prop: "createTime",
    width: "160",
    slotName: "createTime",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "task.dueDate",
    prop: "dueDate",
    width: "160",
    slotName: "dueDate",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "task.assignee",
    prop: "assignee",
    width: "120",
    slotName: "assignee",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "task.suspended",
    prop: "suspended",
    width: "110",
    slotName: "suspended",
    columnType: "slot",
    sortable: true,
    isColumn: true,
  },
  {
    label: "task.state",
    prop: "state",
    width: "120",
    isColumn: true,
  },
  {
    label: "task.priority",
    prop: "priority",
    width: "100",
    sortable: true,
    isColumn: true,
  },
  {
    label: "task.description",
    prop: "description",
    width: "200",
    isColumn: true,
  },
]);

const emit = defineEmits(["assignee"]);
// 分配
function handleAssignee(row: FlowTaskModel) {
  emit("assignee", row);
}

// 行选择
function tableSelected(value: FlowTaskModel[]) {
  tableHooks.selectionRows.value = value;
}

//挂起或激活
function suspendTask(row: FlowTaskModel, suspend: boolean) {
  let req = {
    requestId: Math.random() * 10 + "",
    taskId: row.id,
    suspend: suspend,
  } as FlowSuspendTaskReq;
  monitorTaskApi.suspendTask(req).then((res) => {
    tableHooks.getList();
  });
}

/**
 * 从子组件传过来的事件，刷新列表
 *
 * @returns {void}
 */
function refresh(value: boolean) {
  if (value) {
    tableHooks.getList();
  }
}
if (props.procInstId) {
  //查询数据.
  tableHooks.getList();
}
</script>
